<template>
  <div class="wrapper nav" :style="bkimg">
    <ul class="clearfix">
      <li v-for="item in btns" :class="[btns.length%4==0?'long8':'']">
        <a :href="item.linkUrl">
          <img :src="item.picUrl | imgUrl" alt=""><span>{{ item.elementName }}</span></a>
      </li>
    </ul>
  </div>
</template>
<script>
import {img} from '@/config/env.js'
export default {
  props: ["cdata"],
  computed: {
    btns() {
      return this.cdata[0].tag
    },
    bkimg() {
      if (this.cdata[1].tag) {
        return {backgroundImage:`url(${img()}${this.cdata[1].tag[0].picUrl})`}
      }else {
        return
      }
    },
    navlong() {
      return this.cdata[0].tag.length
    }
  }
}
</script>

<style lang="scss" scoped>
@function to_rem($px) {
  $rem: $px/50px;
  @return #{$rem}rem;
}

.nav {
  width: to_rem(750px);
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  li {
    display: block;
    width: to_rem(150px);
    height: to_rem(152px);
    float: left;
    a {
      display: block;
      width: 100%;
      height: 100%;
      text-align: center;
      padding-top: to_rem(20px);
      img {
        width: to_rem(76px);
        height: to_rem(76px);
      }
      span {
        display: block;
        margin-top: to_rem(8px);
        font-size: to_rem(24px);
      }
    }
  }
  .long8,.long4 {
    width: to_rem(187.5px);
  }
}
</style>
